@import "maxin/lesshat";

@import "maxin/lessAnimate";

@import "maxin/marchen";

//*---------------------------------------------------------------------------------------*/
//*  从这里开始less文件
//*---------------------------------------------------------------------------------------*/
html {
	font-size: 16px;
}

body {
    background:white;
    min-height: 2800px;
}

.header-top {
    //定义变量
    @height: 40px;
    
    width: 100%;
    height: @height;
    background-color: @site-main-color;
    .header-top-in {
        width: @site-width;
        height: @height;
        margin: 0 auto;
        background: url(../images/icon/logo-text.png) no-repeat left center @site-main-color;
    }
}

.header-bottom {
	width: @site-width;
	margin: 0 auto;
	padding: 20px 0;
	.clearfix;
	.logo {
		float: left;
		width: 194px;
		height: 78px;
		background: url(../images/icon/logo-has-text.png) no-repeat center center transparent;
	}
	nav {
		position: relative;
		float: right;
		padding-top: 40px;
		font-size: 0;
		li {
			display: inline-block;
			width: 90px;
			text-align: center;
			margin-left: 50px;
			cursor: pointer;
			color: @text-color;
			font-size: 1.2rem;
			&:hover {
				.on;
			}
		}
		.on {
			color:@site-main-color;
		}
		.under-line {
		position: absolute;
		left: 50px;
		top: 95px;
		width: 90px;
		height: 5px;
		background-color: @site-main-color;
	    }
	}
}
.home-container.in {
	.bounceInLeft();
	.animation(bounceInLeft 1s 1 ease forwards);
}
.home-container.out {
	.bounceOutLeft();
	.animation(bounceOutLeft 1s 1 ease forwards);
}
.serve-container.in {
	.bounceInRight();
	.animation(bounceInRight 1s 1 ease);
}
.serve-container.out {
	.bounceOutRight();
	.animation(bounceOutRight 1s 1 ease);
}
.home-container {
	.banner {
    position: relative;
	width: 100%;
	height: 645px;
	background: url(../images/banner.jpg) no-repeat center center transparent;
	background-size: cover;
    .banner-in {
        width: @site-width;
        height: 645px;
        margin:0 auto;
        position: relative;
    }
    .box.in {
        .flipInRight();
        .animation(flipInRight 1s .5s 1 both);
    }
    .box {
        //变量定义
        @width : 425px;
        position: absolute;
        right: 0;
        top: 45px;
        .price-title {
            width: @width;
            height: 61px;
            margin-bottom: 20px;
            background: url(../images/icon-9-9.png) no-repeat center center transparent;
        }
        .flip.in {
            .flipInRight();
            .animation(flipInRight 1s 1 both);
        }
        .flip.out {
            .flipOutLeft();
            .animation(flipOutLeft 1s 1 both);
        }
        .flip-container {
            height: 382px;
        }
        .flip {
            position: absolute;
            left: 0;
            top: 81px;
            .top {
                padding: 20px 25px;
                height: 255px;
                background-color: rgba(255, 255, 255, 0.5)
            }
        }
        .mid.button {
            cursor: pointer;
            margin-top: 15px;
            background-color: rgba(247, 90, 83, 0.85);
            padding: 20px 0;
            color: white;
            font-size: 1.5rem;
            text-align: center;
            width: 100%;
        }
        .bot {
            margin-top: 15px;
            .btn {
                cursor: pointer;
                width: 201px;
                height: 90px;
            }
            .ios {
                float: left;
                background: url(../images/ios.png) no-repeat center center #525150;
            }
            .android {
                float: right;
                background: url(../images/android.png) no-repeat center center #525150;
            }
        }
        .flip-1 {
            display: block;
            .line {
                padding: 10px 0;
            }
            label {
                color: #4b5756;
                font-size: 1.25rem;
                margin-right: 15px;
            }
            input {
                .box-sizing(border-box);
            }
            select,input {
                color: #4b5756;
                font-size: 1.25rem;
                padding: 7px 10px;
                .border-radius(1px);
                width: 315px;
                background-color: white;
                border:1px solid rgb(197, 197, 197);
            }
        }
        .flip-2 {
            display: none;
            .line {
                padding: 10px 0;
            }
            label {
                color: #4b5756;
                font-size: 1.25rem;
                margin-right: 15px;
            }
            input {
                .box-sizing(border-box);
                color: #4b5756;
                font-size: 1.25rem;
                padding: 7px 10px;
                width: 315px;
                .border-radius(1px);
                background-color: white;
                border:1px solid rgb(197, 197, 197);
            }
            .get-code {
                background-color: #6dbb69;
                font-size: 1rem;
                color: white;
                border:0;
                padding: 9px 12px;
                float: right;
            }
        }
        .flip-3 {
            display: none;
            width: 425px;
            .top {
                text-align: center;
            }
            .text {
                padding-top: 15px;
                font-size: 1rem;
                color:@text-color;
                span {
                    color:red;
                    display: block;
                    font-size: 1.25rem;
                }
            }
        }
    }
    }
    .home {
    	width: @site-width;
    	margin: 0 auto;
    }
    .title {
    	font-size: 2.25rem;
    	color: #3f3f3f;
    	text-align: center;
    	margin-top: 100px;
    	margin-bottom: 40px;
    }
    .sub-title {
    	font-size: 1.25rem;
    	color: #f75a53;
    	text-align: center;
    	line-height: 2.25rem;
    }
    .under-line {
    		display: block;
    		width: 220px;
    		height: 3px;
    		background-color: #8b9090;
    		margin: 40px auto 0 auto;
    }
    .show {
    	.clearfix;
    	padding-top: 110px;
    	.left {
    		float: left;
    	}
    	.right {
    		float: right;
    	}
    	h1 {
    		color: #474747;
    		font-size: 1.875rem;
    		line-height: 3rem;
    	}
    	h2 {
    		color: #777777;
    		font-size: 1rem;
    		line-height: 1.7rem;
    	}
    }
    .show-1 {
    	.left {
    		width: 420px;
    		padding-top: 100px;
    	}
    	.right {
    		width: 451px;
    		height: 298px;
    		background: url(../images/home-1.jpg) no-repeat center center transparent;
    	}
    }
    .show-2 {
    	.left {
    		width: 295px;
    		height: 277px;
    		background: url(../images/home-2.jpg) no-repeat center center transparent;
    	}
    	.right {
    		padding-top: 50px;
    		width: 500px;
    		text-align: left;
    	}
    }
    .show-3 {
    	.left {
    		padding-top: 100px;
    		width: 500px;
    	}
    	.right {
    		width: 417px;
    		height: 365px;
    		background: url(../images/home-3.jpg) no-repeat center center transparent;
    	}
    }
    .show-4 {
    	.left {
    		width: 406px;
    		height: 324px;
    		background: url(../images/home-4.jpg) no-repeat center center transparent;
    	}
    	.right {
    		padding-top: 100px;
    		width: 500px;
    	}
    }
}
.serve-container {
    display: none;
	.title-1 {
		width: 100%;
		height: 87px;
		margin-top: 80px;
		background: url(../images/serve-title-1.png) no-repeat center center transparent;
	}
	.show-1 {
		margin-top: 130px;
		width: 100%;
		height: 354px;
		background: url(../images/serve-show-1.png) no-repeat center center transparent;
	}
	.serve-banner {
		margin-top: 50px;
		width: 100%;
		height: 578px;
		background: url(../images/serve-banner.jpg) no-repeat center center #eeeeee;
	}
	.title-2 {
		width: 100%;
		height: 179px;
		margin-top: 50px;
		background: url(../images/serve-title-2.png) no-repeat center center transparent;
	}
	.show-2 {
		width: 100%;
		height: 663px;
		margin-top: 100px;
		background: url(../images/serve-show-2.png) no-repeat center center transparent;
	}
	.show-3 {
		width: 100%;
		height: 800px;
		margin-top: 70px;
		background: url(../images/serve-show-3.png) no-repeat center center #eeeeee;
	}
}
footer {
	width: 100%;
	background-color: #e9e8e8;
	.footer-in {
		width: @site-width;
		margin: 0 auto;
		padding: 150px 0;
		color: #959595;
		font-size: 1.25rem;
		text-align: center;
	}
}